<template>
	<div class="userbox">
		<div class="formdata">
			<el-form :model="form" :rules="rules" ref="brandForm" label-width="auto" label-position="right">
				<div class="left-side">
					<el-form-item :label="$t('activity_form.title')" prop="title.en_US" >
						<el-input v-model="form.title.en_US" clearable :placeholder="$t('movie_data.form.en_US')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" >
						<el-input v-model="form.title.ja_JP" clearable :placeholder="$t('movie_data.form.ja_JP')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" >
						<el-input v-model="form.title.zh_CN" clearable :placeholder="$t('movie_data.form.zh_CN')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" >
						<el-input v-model="form.title.zh_TW" clearable :placeholder="$t('movie_data.form.zh_TW')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item :label="$t('activity_form.startDate')" prop="startDate" >
						<el-date-picker style="display: flex;justify-content: space-between;width:100%" v-model="form.startDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" :disabled="disabled" :editable="false" :placeholder="$t('formRule.selectPlaceholder')" :disabled-date="beforeOptions"></el-date-picker>
					</el-form-item>
					<el-form-item :label="$t('activity_form.endDate')" prop="endDate" >
						<el-date-picker style="display: flex;justify-content: space-between;width:100%" v-model="form.endDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" :disabled="disabled" :editable="false" :placeholder="$t('formRule.selectPlaceholder')" :disabled-date="backOptions" :default-time="defaultTime"></el-date-picker>
					</el-form-item>
					<el-form-item :label="$t('activity_form.prepareTime')" prop="prepareTime" >
						<el-date-picker style="display: flex;justify-content: space-between;width:100%" v-model="form.prepareTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" :disabled="disabled" :editable="false" :placeholder="$t('formRule.selectPlaceholder')" :disabled-date="prepareOptions" :default-time="defaultTime"></el-date-picker>
					</el-form-item>
					<el-form-item :label="$t('artwork_data.form.creatorId')" prop="creatorId" >
						<el-select v-model="form.creatorId" filterable :filter-method="getCreator" :placeholder="$t('formRule.selectPlaceholder')" @change="selectCreator" :disabled="disabled">
							<el-option v-for="item in creatorIdList" :key="item.value" :label="item.name" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('activity_form.image')" prop="image" >
							<!-- <img :src="form.image" v-if="disabled" class="head"> -->
						<sc-upload v-model="form.image" :title="$t('user_data.uploadPage')" :disabled="disabled || showUpload" :action="action" @getFile="getFile" fileType="thumbnail" @onSuccess="headCallPoster" @handleRemove="handleRemove" width="500px" height="200px">
							<div v-if="showUpload" class="el-upload--picture-card" @click="openUpload(true, false)" style="width: 100%;height: 100%;">
								<div class="file-empty">
									<!-- <el-button icon="el-icon-plus"></el-button> -->
									<i class="el-icon-delete"></i>
									<h4>{{$t('user_data.uploadPage')}}</h4>
								</div>
							</div>
						</sc-upload>
						<!-- <sc-upload v-else v-model="image" :width="500" :height="281" :title="$t('user_data.uploadPage')" :autoUpload="autoUpload" :action="action" @getFile="getFile"></sc-upload> -->
					</el-form-item>
					<el-form-item :label="$t('activity_form.mobileImage')" prop="phoneImage" >
							<!-- <img :src="form.image" v-if="disabled" class="head"> -->
						<sc-upload v-model="form.phoneImage" :title="$t('user_data.uploadPage')" :disabled="disabled || showPhoneUpload" :action="action" @getFile="getFile" fileType="thumbnail" @onSuccess="headCallPoster" @handleRemove="handleRemove(false)" width="250px" height="333px">
							<div v-if="showPhoneUpload" class="el-upload--picture-card" @click="openUpload(false, false)" style="width: 100%;height: 100%;">
								<div class="file-empty">
									<!-- <el-button icon="el-icon-plus"></el-button> -->
									<i class="el-icon-delete"></i>
									<h4>{{$t('user_data.uploadPage')}}</h4>
								</div>
							</div>
						</sc-upload>
						<!-- <sc-upload v-else v-model="image" :width="500" :height="281" :title="$t('user_data.uploadPage')" :autoUpload="autoUpload" :action="action" @getFile="getFile"></sc-upload> -->
					</el-form-item>

				</div>
				<div class="right-side">
					<el-form-item :label="$t('activity_form.activityRules')" prop="activityRules.en_US" >
						<el-input type="textarea" rows="6" resize="none" v-model="form.activityRules.en_US" clearable :placeholder="$t('artwork_data.form.en_US')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;">
						<el-input type="textarea" rows="6" resize="none" v-model="form.activityRules.ja_JP" clearable :placeholder="$t('artwork_data.form.ja_JP')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;">
						<el-input type="textarea" rows="6" resize="none" v-model="form.activityRules.zh_CN" clearable :placeholder="$t('artwork_data.form.zh_CN')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;">
						<el-input type="textarea" rows="6" resize="none" v-model="form.activityRules.zh_TW" clearable :placeholder="$t('artwork_data.form.zh_TW')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item :label="$t('activity_form.eventItems')" prop="eventItems">
						<el-select v-model="form.eventItems" filterable multiple :filter-method="getArtwork" :disabled="disabled||isEdit" :placeholder="$t('table_data.selectText')">
							<el-option
								v-for="item in artworkList"
								:key="item.id"
								:label="item.artworkName"
								:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('activity_form.openSpecialItemsLabel')">
						<el-switch v-model="isShowSpecialItems" :disabled="disabled||isEdit"></el-switch>
					</el-form-item>
					<el-form-item :label="$t('activity_form.specialItems')" prop="specialItems" v-if="isShowSpecialItems">
						<div class="scrollbox">
							<div style="display: flex;justify-content: space-between;width:100%;margin-bottom: 20px" v-for="(item,index) in form.specialItems" :key="index">
								<el-select style="margin-right: 20px;" v-model="item.items" :placeholder="$t('formRule.selectPlaceholder')" filterable :filter-method="getArtwork"  :disabled="disabled">
									<el-option
										v-for="item in artworkList"
										:key="item.id"
										:label="item.artworkName"
										:value="item.id"
										>
									</el-option>
								</el-select>
								<el-input type="number" style="margin-right: 20px;" v-model="item.probability" :placeholder="$t('formRule.inputPlaceholder')" :min=0 :max=100 :disabled="disabled" >
									<template v-slot:suffix>
										<div>
											%
										</div>
									</template>
								</el-input>
								<el-icon class="del" v-if="form.specialItems&&form.specialItems.length>0&&!disabled" @click="delDiscount(index)"><component :is="oicon('el-icon-delete')" /></el-icon>
							</div>
						</div>
						<el-button icon="el-icon-circle-plus" @click="addDiscount">{{ $t('activity_form.addCard') }}</el-button>
					</el-form-item>
					
					
				</div>
			</el-form>
			<!-- 海报 -->
			<sCDialog :modelValue="modelValue" :showFullscreen="false" @closeDialog="openUpload" :closeOnClickModal="false">
				<template v-slot:header>
					<div>
						<!-- 上传步骤 -->
					</div>
				</template>
				<div v-if="modelValue">
					<el-form :model="scDialogData" label-width="auto" label-position="right" style="display: block;">
						<!-- <el-form-item :label="$t('artwork_data.form.watermark')">
							<el-radio v-model="scDialogData.isDefense" :label="true" :disabled="disabled" @change="changeDef">{{ $t('table_data.yes') }}</el-radio>
							<el-radio v-model="scDialogData.isDefense" :label="false" :disabled="disabled" @change="changeDef">{{ $t('table_data.no') }}</el-radio>
						</el-form-item> -->
						<el-form-item :label="$t('artwork_data.form.compression')" >
							<el-radio v-model="scDialogData.compression" :label="true" :disabled="disabled" @change="changeDef">{{ $t('table_data.yes') }}</el-radio>
							<el-radio v-model="scDialogData.compression" :label="false" :disabled="disabled" @change="changeDef">{{ $t('table_data.no') }}</el-radio>
						</el-form-item>
						<el-form-item :label="$t('artwork_data.form.filePage')">
							<sc-upload v-model="scDialogData.newImg" :title="$t('user_data.uploadPage')" :isCompression="scDialogData.compression" :action="action" @getFile="getFile" fileType="bgImage" @onSuccess="uploadSuccess" @handleRemove="delImg" :width="(isWeb?'500px':'250px')" :height="(isWeb?'200px':'333px')"></sc-upload>
							<div class="tips">{{ isWeb?$t('components.upload.webSize'):$t('components.upload.phoneSize') }}</div>
							<sc-cropper v-if="scDialogData.thumbnailUrl" :src="scDialogData.thumbnailUrl" compress="0.8" aspectRatio="0" ref="cropper" style="display: none !important;"></sc-cropper>
							<img :src="scDialogData.newImg" ref="wm" style="display: none;">
						</el-form-item>
					</el-form>
				</div>
				<template v-slot:footer>
					<el-button type="success" :disabled="!scDialogData.newImg" :loading="isSaveing" @click="upload('activity')">{{$t('table_data.saveText')}}</el-button>
				</template>
			</sCDialog>
		</div>
		<div id="footer" v-if="!disabled">
			<el-button @click="visible=false" >{{$t('table_data.cancelText')}}</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit">{{$t('table_data.saveText')}}</el-button>
			<el-button type="primary" :loading="isSaveing" @click="confirm(this.form.festivalId)">{{$t('short_data.step.confirm')}}</el-button>
		</div>
	</div>
</template>

<script>
import sCDialog from "@/components/scDialog"
import  {activity } from '@/mixin/activity'
import { uploadMixins } from '@/mixin/uploadMixins'
import scCropper from '@/components/scCropper'

	export default {
		emits: ['success', 'closed'],
		components: {
			sCDialog,
			scCropper
		},
		mixins: [activity, uploadMixins],
		data() {
			return {
				createFileId: '',
				artworkList: [],
				creatorIdList: []
			}
		},
		watch: {
			// "scDialogData.newImg": {
      // 	handler: function (val) {
			// 		console.log('11111111111111111111',this.form.fileId);
			// 	},
			// 	immediate: true,
     	// 	deep: true // 可以深度检测到 person 对象的属性值的变化
			// }
		},
		computed: {
			icon() {
				return ()=>{
					const dUrl = decodeURIComponent(this.form.fileUrl);
					const str = dUrl.split('?')[0].split('.');
					console.log('fileType',str[str.length-1]);
					const type = str[str.length-1];
					if(type){
						if(['jpg','jpeg','png','gif','webp','tiff','bmp','heif','svg'].includes(type)){
							return 'sc-icon-img'
						}else if(['mp3','wma','ape'].includes(type)){
							return 'sc-icon-mp3'
						}else if(['mp4','mp5','avi','wmv'].includes(type)){
							return 'sc-icon-video'
						}else if(['pdf','txt','xlsx'].includes(type)){
							return 'sc-icon-pdf'
						}else{
							return 'sc-icon-none'
						}
					}
					return 'sc-icon-none'
				}
			}
		},
		mounted(){
			this.disabled = this.$route.query.type=='detail'?true:false;
			this.$store.commit("updateViewTagsTitle", this.disabled?this.$t('menu.activityTable'):this.$t('menu.activityTable'))
			if(this.$route.query.id != 'add'){
				this.getInfo();
			}
			this.getCreator();
			this.scDialogData.isDefense = false;
		},
		methods: {
			selectCreator() {
				this.getArtwork();
			},
			async getCreator(name=''){
				const params = {
					pageNum: 1,
					pageSize: 10,
					status: 1,
					userType: 2,
					keyword: name
				}
				const res = await this.$API.user.searchUser.get(params)
				this.creatorIdList = res.data.list.map(n=>({
					value: n.id,
					name: n.title
				}))
			},
			async getInfo(){
				let id = this.$route.query.id;
				const res = await this.$API.activity.activityDetail.get(id);
				this.form = res.data;
				this.form.eventItems = res.data.eventItems.map(n=> n.artworkId)
				// this.form.thumbnailUrl = res.data.image;
				this.isShowSpecialItems = this.form.specialItems.length?true:false;
				this.showPhoneUpload = false;
				this.showUpload = false;
				this.form.specialItems = this.form.specialItems.map(n=>({probability: n.probability*100,items: n.artworkId}));
			},
			async getArtwork(value=''){
				const params = {
					pageNum: 1,
					pageSize: 10,
					keyword: value,
					creatorId: this.form.creatorId
				}
				const res = await this.$API.common.searchCreator.get(params)
				this.artworkList = res.data.list||[]
				
			},
			closeTag(){
				const tagList = this.$store.state.viewTags.viewTags;
				const tag = this.$route;
				const nowTagIndex = tagList.findIndex(item => item.fullPath == tag.fullPath)
				this.$store.commit("removeViewTags", tag)
				this.$store.commit("removeIframeList", tag)
				this.$store.commit("removeKeepLive", tag.name)

				const leftView = tagList[nowTagIndex - 1]
				if (leftView) {
					this.$router.push(leftView)
				} else {
					this.$router.push('/')
				}
			},
			/* 表单提交方法
			 * params: 
			 * type: 保存类型，add:保存1，edit:上架2
			 */
			submit(type){
				console.log('data:',this.form)
				this.$refs.brandForm.validate(async (valid) => {
					if (valid) {
						if(this.$route.query.type != 'edit')this.showProp = true;
						this.isSaveing = true;
						const form = {};
						// for(let i in this.form){
						// 	if(this.form[i])form.i = this.form.i
						// }
						Object.assign(form,this.form);
						// if(form.cinemaList&&form.cinemaList.length)form.cinemaList = form.cinemaList.map(n=>n.theatreId)
						form.imageFileId = this.form.thumbnailId||this.form.imageFileId;
						form.thumbnailUrl = '';
						form.thumbnailId = '';
						form.specialItems = form.specialItems.map(n=>({...n,probability: Number((Number(n.probability)/100).toFixed(2))}));
						
						let api = this.$API.activity.postFestivalData;
						console.log('data2:',form)
						try {
							var res = await api.post(form);
							this.isSaveing = false;
							if(res.code == 'OK'){
								this.$emit('success', this.form, this.mode)
								this.$message.success(this.$t('table_data.operasucc'))
								if(type == 2)this.confirm(res.data);
								this.closeTag();
							}else{
								this.$alert(res.message, this.$t('table_data.tips'), {type: 'error'})
							}
						}catch(err){
							this.isSaveing = false;
							console.log(err)
						}
					}
				})
			},
			async confirm(id) {
				if(!id) {
					this.submit(2);
					return
				}
				const res = await this.$API.activity.availableActivity.get(id);
				if(res.code == 'OK'){
					this.$message.success(this.$t('table_data.operasucc'))
					this.closeTag();
				}else{
					this.$alert(res.message, this.$t('table_data.tips'), {type: 'error'})
				}
			}
		}
	}
</script>

<style scoped>
.userbox {
	background: #fff;
	padding: 30px;
	margin: 16px;
	border: 1px solid #CCCCCC;
	border-radius: 4px;
}
.grid-content {
	border: 1px solid #eee;
	font-size: 14px;
	min-height: 50px;
	/* line-height: 50px; */
	padding-left: 12px;
	display: flex;
  align-items: center;
}
.bg-purple {
	background: #F6F8F9;
	color: #888;
	
	display: flex;
    align-items: center;
}
.el-col-list {
	flex: 0 0 33.3%;
}
.bg-purple-light {
	color: #000;
}
.el-form {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.box-card {
	width: 100%
}
:deep .el-upload-list {
	max-height: 150px;
  overflow-y: scroll;
}
:deep .el-transfer {
    width: 80%;
  margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
:deep .el-transfer-panel__filter {
    width: 93%;
}
.chooseCinemabox-title {
    font-size: 20px;
  margin: 0 auto 20px;
}
.chooseCinemabox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* width: 85%; */
    margin: 0 auto 30px;
    font-size: var(--el-form-label-font-size);
}
:deep .el-transfer-panel {
    width: 40%;
}
.scrollbox {
	width: 100%;
	overflow-y: scroll;
	display: flex;
	max-height: 700px;
	flex-wrap: wrap;
}
.scrollbox-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 1px solid #eee;
	margin: 0 10px 10px 0;
}
.sortNuminput {
	display: flex;
}
/* .scrollbox div {
	margin-right: 10px;
} */
.scrollbox .uImg {
	width: 200px;
	height: auto;
	/* height: 400px; */
  /* object-fit: contain; */
}
.left-side, .right-side {
	width: 46%;
}
.uploadbtn {
	cursor: pointer;
}
.uploadbtn:hover {
	color: var(--el-color-primary);
}
.item {
	width: 100%;
	display: flex;
	align-items: flex-start;
}
.tips {
	color: #888;
	font-size: 14px;
	width: 100%;
}

.datebox {
	width: 100%;
	display: flex;
	justify-content: flex-start;
}
.datebox_left,.datebox_right {
	width: 50%;
}
.item-right {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	height: 118px;
}
.el-form-item {
	width: 100%;
}
.leftlabel {
	width: 120px;
}
.el-select {
	width: 100%;
}
.item-lastName {
	display: flex;
	justify-content: space-between !important;
	align-content: space-between !important;
	/* height: 200px; */
	width: 100%;
	margin-bottom: 18px;
}
.item-desc {
	/* height: 500px; */
}	

.del {
	padding-top: 8px;
	font-size: 22px;
	color: red;
	cursor: pointer;
}
.icon {
	width: auto;
  height: 40px;
}
.item-right{
	height: 140px;
}
.head {
	width: 500px;
  height: 281px;
}
.background {
	width: 500px;
	height: 300px;
}
.rightInput {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-content: space-between;
	width: 100%;
}
.textarea {
	height: 600px;
}
.item-right-form {
	display: flex;
}
.item>div:nth-child(2){
	margin-left: 200px;
}
#footer {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}


@media only screen and (max-width: 750px) {
	.left-side, .right-side {
		width: 100%;
	}
	.el-form {
		flex-wrap: wrap;
	}
}
</style>
